<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        title: {
          text: '高港港区泊位展示',
          bottom: '5',
          left: 'center',
          show: true,
          textStyle: {
            color: '#FFF',
            fontSize: 15,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          top: 'center',
          right: '3%',
          itemGap: 15,
          textStyle: {
            color: '#FFF',
            fontWeight: 'bold'
          },
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: '例：',
            type: 'pie',
            radius: [20, 90],
            center: ['35%', '50%'],
            itemStyle: {
              borderRadius: 0,
            },
            labelLine: {
              normal: {
                length: 0, // 指示线长度
              },
            },
            label: {
              normal: {
                formatter: function (data) {
                  //.toFixed(0)去掉小数位，如果为2就是保留两位小数
                  let b = data.percent.toFixed(0) + '%'
                  return b
                },
                position: 'inner', //文字显示在内部，如果在外边把这个去掉就好
                color: '#fff', //文字的颜色
              },
            },
            color:['#38CAFB','#488CF7','#2AAEFA','#4ADFCB'],
            data: [
              { name: "1万吨以下", value: "10" },
              { name: "1-5万吨", value: "10" },
              { name: "5-10万吨", value: "10" },
              { name: "10万吨以上", value: "10" }
            ],
          },
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
